<template>
    <div class="type-container">
        <el-row :gutter="20" class="search-row">
            <el-col :span="4" class="search-col">
                <el-button type="primary" :icon="Plus" class="add-button" @click="showDialog">添加</el-button>
            </el-col>
            <el-col :span="4" class="search-col">
                <el-select v-model="selectedType" placeholder="题目类型" class="search-select">
                    <el-option
                        v-for="item in types"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="4" class="search-col">
                <el-input v-model="searchText" placeholder="请输入内容" class="search-input"></el-input>
            </el-col>
            <el-col :span="4"></el-col>
            <el-col :span="4"></el-col>
            <el-col :span="4">
                <el-button type="primary" style="width: 80px;float: right;" :icon="Search" @click="search" class="search-button">搜索</el-button>
            </el-col>
            
        </el-row>
        <el-table :data="tableData" style="width: 100%; margin-top: 20px;" :height="tableHeight" :row-class-name="tableRowClassName">
            <el-table-column prop="id" label="序号" width="80"></el-table-column>
            <el-table-column prop="category" label="题库分类"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag :type="scope.row.status === '进行中' ? 'success' : 'info'">{{ scope.row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="created_at" label="创建时间"></el-table-column>
            <el-table-column prop="operator" label="操作人"></el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length">
            </el-pagination>
        </div>
        <el-dialog v-model="dialogVisible" title="添加题目类型">
            <el-form :model="form" label-width="100px" class="dialog-form">
                <el-form-item label="题库分类">
                    <el-input v-model="form.category"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description"></el-input>
                </el-form-item>
                <el-form-item label="操作人">
                    <el-input v-model="form.operator"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addCategory">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Plus, Search } from '@element-plus/icons-vue';

const selectedType = ref('');
const searchText = ref('');
const types = ref([
    { value: 'type1', label: '类型1' },
    { value: 'type2', label: '类型2' },
    { value: 'type3', label: '类型3' }
]);

const tableData = ref([
    { id: '01', category: '数学', description: '高中数学题库', status: '进行中', created_at: '2021-08-25 14:40', operator: '张三' },
    { id: '02', category: '物理', description: '高中物理题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '李四' },
    { id: '03', category: '化学', description: '高中化学题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '王五' },
    { id: '04', category: '数学', description: '高中数学题库', status: '进行中', created_at: '2021-08-25 14:40', operator: '张三' },
    { id: '05', category: '物理', description: '高中物理题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '李四' },
    { id: '06', category: '化学', description: '高中化学题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '王五' },
    { id: '07', category: '数学', description: '高中数学题库', status: '进行中', created_at: '2021-08-25 14:40', operator: '张三' },
    { id: '08', category: '物理', description: '高中物理题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '李四' },
    { id: '09', category: '化学', description: '高中化学题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '王五' },
    { id: '10', category: '数学', description: '高中数学题库', status: '进行中', created_at: '2021-08-25 14:40', operator: '张三' },
    { id: '11', category: '物理', description: '高中物理题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '李四' },
    { id: '12', category: '化学', description: '高中化学题库', status: '未开课', created_at: '2021-08-25 14:40', operator: '王五' }
]);

const tableHeight = ref('400px'); // 调整表格高度

const dialogVisible = ref(false);
const form = ref({
    category: '',
    description: '',
    operator: ''
});

const showDialog = () => {
    dialogVisible.value = true;
};

const addCategory = () => {
    tableData.value.push({
        id: (tableData.value.length + 1).toString().padStart(2, '0'),
        category: form.value.category,
        description: form.value.description,
        status: '未开课',
        created_at: new Date().toLocaleString(),
        operator: form.value.operator
    });
    dialogVisible.value = false;
    form.value.category = '';
    form.value.description = '';
    form.value.operator = '';
};

const search = () => {
    console.log('搜索内容:', selectedType.value, searchText.value);
};

const tableRowClassName = ({ rowIndex }) => {
    return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
};

onMounted(() => {
    const updateTableHeight = () => {
        tableHeight.value = `${window.innerHeight - 300}px`; // 调整表格高度
    };
    updateTableHeight();
    window.addEventListener('resize', updateTableHeight);
});
</script>

<style scoped>
.type-container {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
}

.add-button {
    text-align: left;
}

.search-row {
    margin-bottom: 20px;
}


.search-select,
.search-input {
    width: 100%;
    float: left;
}

.search-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-container {
    margin-top: 20px;
    text-align: right;
    width: 100%;
}



.dialog-footer {
    text-align: right;
}

::v-deep .even-row{
    background-color: #e6f7e6 !important; /* 浅绿色 */
}

::v-deep .odd-row{
    background-color: #fff9e6 !important; /* 浅黄色 */
}
</style>
